<template>
  <div>
    <!-- 头部 -->
    <Header />
    <!-- /头部 -->

    <!-- this.$router.push({
        path:'/list',
        query:{id,name,title}
    })-->
    <!-- 接收传递参数 -->
    <!-- list 
    this.$route.query;-->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- {{category}} -->
        <div class="title">{{ category.name }}</div>
        <div class="inner_content">
          <!-- {{categoryList}} -->
          <!-- 左侧表格 -->
          <div class="articleList">
            <!-- 文章列表 -->
            <ul v-if="categoryList.total > 0">
              <li
                class="list_list"
                v-for="item in categoryList.list"
                :key="item.id"
              >
                <div class="artitle" @click="todetails(item.id)">
                  {{ item.title }}
                </div>
                <div class="list">
                  <!-- 发表时间 -->
                  <span>{{ item.publishTime | fmtDate }}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <!--阅读次数 -->
                  <span>{{ item.readTimes }}</span>
                </div>
              </li>
            </ul>

            <div v-else class="nodata">暂无数据</div>
            <!-- /文章列表 -->
            <!-- 分页 -->

            <div class="page">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="categoryList.pageSize"
                hide-on-single-page
                :total="categoryList.total"
              >
              </el-pagination>
            </div>

            <!-- /分页 -->
          </div>
          <!-- 右侧表格 -->
          <div class="rank">
            <div class="wrapper">
              <div class="rank1" @click="toApply">查询报名信息&gt;&gt;</div>
              <div class="rank2" @click="toHome">最新活动2&gt;&gt;</div>
              <div class="rank3" @click="toHome">最新活动3&gt;&gt;</div>
              <div class="rank4" @click="toHome">最新活动4&gt;&gt;</div>
              <div class="rank5" @click="toHome">最新活动5&gt;&gt;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer />
    <!-- /底部 -->
  </div>
</template>
<script>
import { get } from "../utils/request";
import Header from "../components/Header";
import Footer from "../components/Footer";
export default {
  // 注册局部组件
  components: {
    Header,
    Footer,
  },
  created() {
    this.category = this.$route.query;
    this.loadArticle();
  },
  // 监听器 监听$route.query
  watch: {
    "$route.query": {
      // 当属性发生变化触发handler函数
      handler(query) {
        this.category = query;
        // 只有栏目不同展示数据不同
        this.loadArticle();
      },
      deep: true,
    },
  },
  methods: {
    toApply() {
      this.$router.push({
        path: "/apply",
      });
    },
    toHome() {
      //  跳转到主页
      this.$router.push({
        path: "/home",
      });
    },
    // 跳转到详情页
    todetails(id) {
      this.$router.push({
        path: "/article",
        query: { id },
      });
    },
    // 给分页按钮绑定事件
    handleCurrentChange(page) {
      // 代表当前点击的按钮
      // alert(page);  //2
      this.params.page = page; //2
      this.loadArticle();
    },
    // 加载文章方法
    loadArticle() {
      let url = "/index/article/pageQuery";
      this.params.categoryId = this.category.id;
      // {
      //   page:1
      //   pageSize:5
      // }
      get(url, this.params).then((res) => {
        this.categoryList = res.data; //{ list:[]}
      });
    },
  },
  data() {
    return {
      category: {},
      params: {
        page: 1,
        pageSize: 5,
      },
      categoryList: { list: [] },
    };
  },
};
</script>
<style lang="scss">
.content {
  padding: 2em 0.5em;
  background-color: #ecf6f2;
  & > .wrapper {
    .inner_content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        height: 500px;
        border-radius: 5px;
        padding: 1em 0.5em;
      }
      .articleList {
        .artitle {
          cursor: pointer;
        }
        .nodata {
          color: red;
          text-align: center;
          padding: 1em 0.5em;
        }
        .page {
          padding: 1em 0.5em;
          text-align: center;
        }

        ul > li.list_list {
          & > div {
            line-height: 2em;
            // padding: 1em .5em;
          }
          border-bottom: 1px solid #ededed;
        }
        flex: 1;
        margin-right: 2em;
      }
      .rank {
        flex-basis: 200px;
        .wrapper {
          width: 100%;
          height: 100%;
          div {
            width: 100%;
            height: 20%;
            color: red;
            font-size: 2em;
            cursor: pointer;
          }
        }
      }
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      color: #028b39;
      padding: 1em 0.5em;
    }
  }
}
</style>
